<template>
  <div class="agentInfo">
    <div class="info-title">门店列表</div>
    <div class="filter-container" style="margin-top: 24px;">
      <el-input v-model="listQuery.agent_name" placeholder="门店名称" clearable class="filter-item input-item" style="width: 200px;" @clear="handleFilter" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      height="200px"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="ID" prop="id" align="center" :class-name="getSortClass('id')">
        <template slot-scope="{row}">
          <span>{{ row.id_public_agent_info }}</span>
        </template>
      </el-table-column>
      <el-table-column label="门店名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.agent_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上线状态" align="center">
        <template slot-scope="{row}">
          <span>{{ row.is_online === 0 ? '上线' : '下线' }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="currentPage" :limit.sync="listQuery.limit" @pagination="getPageList" />
  </div>
</template>

<script>
import { warehouseList } from '@/api/warehouse'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'AgentInfo',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (!(/^(13[0-9]|14[5-9]|15[0-3,5-9]|16[2,5,6,7]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/.test(value))) {
        this.temp.agent_phone = ''
        callback(new Error('手机号码格式不正确'))
      } else {
        callback()
      }
    }
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      currentPage: 0,
      listQuery: {
        invoke_method: 'public_page_4m_load_agent_list',
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10,
        agent_type_4_use: 20,
        pre_db_para_order_by_para: ' register_time desc ',
        agent_name: null,
        is_online: 0
      },
      importanceOptions: [1, 2, 3],
      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
      statusOptions: ['published', 'draft', 'deleted'],
      showReviewer: false,
      temp: {
        id_public_agent_info: null,
        agent_name: null,
        contact_name: null,
        agent_phone: null,
        account_user: null,
        account_pwd: null,
        agent_province: null,
        agent_city: null,
        agent_country: null,
        agent_addr: null,
        is_online: 0,
        agent_type_4_user: 20
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        agent_name: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' }
        ],
        contact_name: [
          { required: true, message: '请输入联系人名称', trigger: 'blur' }
        ],
        agent_phone: [
          { required: true, message: '请输入联系人电话', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        account_user: [
          { required: true, message: '请输入登录账户', trigger: 'blur' }
        ],
        agentPassword: [
          { required: true, message: '请输入登录密码', trigger: 'blur' }
        ],
        agent_province: [
          { required: true, message: '请选择所在省份', trigger: 'blur' }
        ],
        agent_city: [
          { required: true, message: '请选择所在市(区)', trigger: 'blur' }
        ],
        agent_country: [
          { required: true, message: '请选择所在县(区)', trigger: 'blur' }
        ],
        agent_addr: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ]
      },
      downloadLoading: false,
      multipleSelection: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    /*
    * 获取页面数据
    * */
    getList() {
      this.listLoading = true
      warehouseList(this.Qs.stringify(this.listQuery)).then(response => {
        this.list = response.page_content
        this.total = response.result_num

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },
    /*
    * 点击分页进行查询
    * */
    getPageList(val) {
      this.listQuery.pre_db_para_begin_idx = (val.page - 1) * this.listQuery.pre_db_para_length_4_list
      this.getList()
    },
    /*
    * 查询数据
    * */
    handleFilter() {
      this.listQuery.pre_db_para_begin_idx = 0
      this.getList()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    },
  }
}
</script>

<style scoped lang="scss">
@import "../../../styles/variables";

.agentInfo {
  padding: 36px 36px 0;
  .info-title {
    background-color: $mainColor;
    color: #FFFFFF;
    padding: 12px 0;
    text-align: center;
    font-size: 18px;
  }
}
</style>
